<template>
	<view :style="{height: uHeight + 'px'}">
		<view class="user-info flex" id="userInfo">
			<view class="headImg ">
				<u-avatar :src="userInfo.avatarUrl" mode="square"></u-avatar>
				
			</view>
			<text v-if="userId == ''" style="width: 600rpx;margin-left: 10rpx;font-weight: 600;" @click="login()">未登录</text>
			<view class="phone text-center">
				<view class="" v-for="item in userInfo.mobile" :key="item.id" @longpress="delePhone(item.id)">
					{{item.mobile}}
				</view>
			</view>
			<view class="flex" v-if='buttonType === "big"'>
				<view type="warning" class="botton d-btn btn fix-btn con-bottom"  style="width: 200rpx;flex: 1;
				justify-content: center;height: 80rpx;line-height: 80rpx;border-radius: 10rpx;text-align: center;
				align-items: center;background-color: #ff9900;color: #FFFFFF;margin-right: 10rpx;font-size: 25rpx;"  @click="toBigMiniProgram('wxe0d6d01b0cdc478a')">
							切换到招聘模式</view>
				<!-- <u-button  open-type="share" type="warning" v-if="(buttonShow && userId > 0)" :custom-style="customStyle">邀请专属代招</u-button> -->
			</view>
			<!-- <view class="" v-if='buttonType === "small"'>
				<view class="invitation-btn" v-if="buttonShow">邀请大招工中介加入(奖金1000)</view>
				<view class="invitation-btn" v-if="buttonShow" style="margin-top: 20upx;">邀请小招工中介加入(奖金100)</view>
			</view> -->
			<view class="" v-if='buttonType === "small"'>
				<u-button open-type="share" type="warning" :custom-style="customStyle">切换到发布模式</u-button>
				<u-button open-type="share" type="warning" :custom-style="customStyle" style="background-color: #FF0000;">分享给朋友</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: {
			buttonShow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				customStyle: {
					'background': '#E04110',
					'border-color': '#E04110',
				},
				uHeight: 64,
				buttonType:  'big',
				userId:uni.getStorageSync('userId')
			}
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		},
		watch: {
		userInfo(ns) {
			console.log('====>',ns)
			if(!ns) {
				this.getUheight()
			}
		}	
		},
		created() {
			this.getUheight()
		},
		methods: {
			login(){
				uni.redirectTo({
					url:'../../pages/login'
				})
			},
			toBigMiniProgram(id) {
				uni.navigateToMiniProgram({
					appId: id,
					path: '/pages/index/index',
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			getUheight() {
				// const query = uni.createSelectorQuery().in(this);
				//             query.select('#userInfo').boundingClientRect(data => {
				//                 this.uHeight = data.height + 10
				//             }).exec();
			},
			delePhone(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个手机号吗？',
					success: data => {
						if(data.confirm) {
							this.$u.api.postDelMobile({id}).then(res => {
								if(res.status == true) {
									uni.showToast({
										title: '操作成功'
									})
									this.postGetAdminInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			postGetAdminInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api
						.postGetAdminInfo()
						.then(res => {
							if (res.status == true) {
								uni.setStorageSync('userPhone', res.data.phone);
								// this.$store.commit('commitUserId', res.data.id);
								uni.setStorageSync('userId', res.data.id);
								uni.setStorageSync('userInfo', res.data)
								this.$store.commit('commitUserInfo', res.data)
							}
							resolve();
						})
						.catch(err => {
							console.log(err);
							reject();
						});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.text-center{
	text-align: center;
}
.user-info{
	position: fixed;
	top: 0;
	padding: 10upx 20upx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFFFFF;
	z-index: 99;
	.headImg{
		width: 100upx;
		height: 100upx;
		flex-shrink: 0;
		.img{
			border-radius: 100upx;
			width: 100upx;
		}
	}
	.phone{
		width: 320upx;
	}
}
.invitation-btn{
	background-color: #E04110;
	color: #FFFFFF;
	width: 280upx;
	padding: 10upx 20upx;
	text-align: center;
	border-radius: 10upx;
}
</style>
